window.onload = function() {
    var mySwiper = new Swiper(".content", {
        autoplay: true,
        loop: true,
        effect: "fade",
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            clickableClass: 'my-pagination-clickable',
        }
    })
    mySwiper.el.onmouseover = function() {
        mySwiper.navigation.$nextEl.removeClass('hide');
        mySwiper.navigation.$prevEl.removeClass('hide');
    }
    mySwiper.el.onmouseout = function() {
        mySwiper.navigation.$nextEl.addClass('hide');
        mySwiper.navigation.$prevEl.addClass('hide');
    }

    var swiper2 = new Swiper('.swiper2', {
        slidesPerView: 4,
        // 触摸失效
        touchRatio: 0,
        //点击事件失效
        simulateTouch: true,
        grabCursor: true,
        pauseOnMouseEnter: true,
    });
    var swiper1 = new Swiper('.swiper1', {
        thumbs: {
            swiper: swiper2,
        }
    })
    var slide = document.querySelectorAll(".swiper2 .swiper-slide");
    for (let i = 0; i < slide.length; i++) {
        slide[i].setAttribute("data-index", i)
    }

    $(".swiper2 .swiper-slide .pointer").css({ display: "none" });
    $(".swiper2 .swiper-slide").on("mouseover", function() {
        let indexTo = $(this).attr("data-index");
        swiper1.slideTo(indexTo, 18, false);
        $(this).find(".pointer").css({ display: "block" });
        $(this).siblings().find(".pointer").css({ display: "none" });
        $(this).find(".cover").css({ opacity: 0, }).siblings().css({ fontWeight: 700 })
    })
    $(".swiper2 .swiper-slide").on("mouseout", function() {
        $(this).find(".cover").css({ opacity: 0.3 }).siblings().css({ fontWeight: 400 })
    })

}